Imagen de fondo en movimiento

Este efecto tan llamativo es obra de Gaya Desing trabaja con jQuery y como puede verse consiste en un fondo con movimiento, ese fondo sólo es visible en la transparencia de una imagen. Para hacer más sencilla la explicación mejor será mostrarlo con capturas.

La imagen que vamos a añadir consiste en un texto, lo podemos crear con Photoshop o como en mi caso con GIMP. Hay distintas formas de conseguir un fondo transparente con GIMP.Y aquí una de ellas. Creamos la imagen y la guardamos como formato png.

550 x 150

Una vez tenemos la imagen con el mismo editor le añadimos transparencia al texto.
En herramientas marcamos sobre la varita para obtener selección difusa.

Seguidamente situamos el puntero sobre el texto y pulsamos botón derecho del ratón. Nos mostrará un desplegable, debemos escoger "colores" y a continuación "Color Alfa". Como resultado obtenemos la imagen con texto transparente que guardaremos en formato png.

Cuando tenemos la imagen es el momento de pasar a la plantilla.
Nos situamos justo antes de </head> y añadimos los estilos:

<style type='text/css'>.
content {
width: 500px; /* ancho del contenido */
margin: 0px auto;
}
.scrollbg {background-image: url(url-imagen-fondo); /* imagen de fondo */
background-color: #000; /* color de fondo */
width: 550px; /* ancho imagen de fondo */
height: 150px; /* alto imagen de fondo */
}
.scrollbg img {
display: block;
}
</style>

La imagen que he creado para el ejemplo mide 550 X 150.
La de fondo puede ser una textura y la añadimos en scrollbg/url-imagen-fondo, el ancho lo modificamos en width y la altura en height.
En width de content, que es el bloque que contiene la imagen y el fondo también debemos añadir la misma anchura de la imagen con transparencia.
A continuación añadimos jquery/1.4.1/jquery.min.js si ya lo estamos utilizando omitimos este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Ahora, copiamos el contenido del siguiente archivo y lo pegamos justo después.
Guardamos los cambios realizados y nos situamos en plantilla edición de HTML, allí editamos un nuevo gadget de HTML/Javascript y en su interior añadimos:

<div class='scrollbg' style='background-image: url(url-imagen-fondo)'>
<img src="url-imagen-texto-transparente" alt="" />
</div>

En url-imagen-fondo añadimos la misma url que anteriormente añadimos en los estilos.
En url-imagen-texto-transparente añadimos la url que creamos con fondo transparente.